<!--DOCTYPE html-->
<html>
<head>
<style>
div { background:green; margin:2em; padding:0.25em; }
.group { background:silver; margin:4em; }
#clone { position:absolute; font-size:0; margin:0; background:navy; z-index:999; }
#test1 { padding:1em; border:8px groove }
#test2 { margin-left:50%; }
#test3 { position:relative; }
#test4 { position:absolute; }
#test5 { width:50%; border:0.5em double; border-color:gray black }
#test6 { width:50%; margin:auto; }
table td { background:green }
#test13 { border-collapse:collapse; }
#test13 td { border-style:inset; border-width:2px 6px 10px 14px }

</style>

<script>
function getPos(elt) {
	var x = elt.offsetLeft
	var y = elt.offsetTop
	while (elt = elt.offsetParent) {
		x += elt.offsetLeft
		y += elt.offsetTop
	}
	return {x:x, y:y}
}

function clone(elt) {
	try {
		var bs = getUsedValue(elt, 'box-sizing')
		var pl = getUsedValue(elt, 'paddingLeft', 'px')
		var pr = getUsedValue(elt, 'paddingRight', 'px')
		var pt = getUsedValue(elt, 'paddingTop', 'px')
		var pb = getUsedValue(elt, 'paddingBottom', 'px')
		var bl = getUsedValue(elt, 'borderLeftWidth', 'px')
		var br = getUsedValue(elt, 'borderRightWidth', 'px')
		var bt = getUsedValue(elt, 'borderTopWidth', 'px')
		var bb = getUsedValue(elt, 'borderBottomWidth', 'px')
		var bls = getUsedValue(elt, 'borderLeftStyle')
		var brs = getUsedValue(elt, 'borderRightStyle')
		var bts = getUsedValue(elt, 'borderTopStyle')
		var bbs = getUsedValue(elt, 'borderBottomStyle')
		var bc = getUsedValue(elt, 'borderColor')
		var w =	getUsedValue(elt, 'width', 'px')
		var iw = getUsedValue(elt, 'width')
		var h = getUsedValue(elt, 'height', 'px')
		var l = getUsedValue(elt, 'left')
		var t = getUsedValue(elt, 'top')
		var p = getUsedValue(elt, 'position')
		var w2 = elt.offsetWidth - bl - br - pl - pr
	} catch(e) {
		var f = getUsedValue.caller
		var s = ''
		while(f) {
			s += /^function (\S*)\(/.exec(f)[1] + '-'
			f = f.caller
		}
		alert(e.name + ':' + e.message + ' [' + s + ']')
		throw(e)
	}
	//alert(elt.tagName + '#' + elt.id + ':' + w + ',' + h)
	
	var div = document.getElementById('clone')
	var s = div.style
	s.width = w + 'px'
	s.height = h + 'px'
	s.paddingLeft = pl + 'px'
	s.paddingRight = pr + 'px'
	s.paddingTop = pt + 'px'
	s.paddingBottom = pb + 'px'
	s.borderLeftWidth = bl + 'px'
	s.borderRightWidth = br + 'px'
	s.borderTopWidth = bt + 'px'
	s.borderBottomWidth = bb + 'px'
	s.borderTopStyle = bts
	s.borderRightStyle = brs
	s.borderBottomStyle = bbs
	s.borderLeftStyle = bls
	s.borderColor = bc
	var pos = getPos(elt)
	s.left = pos.x + 'px'
	s.top = bs == 'border-box' ?
		pos.y - h :
		pos.y - h - pt - pb - bt - bb + 'px'
	
	alert([bs, l, t, pos.x, pos.y, 'offset:', elt.offsetWidth, 'client:', elt.clientWidth, bl, pl, w, w2, pr, br])
}

document.onclick = function (evt) {
	evt = evt || event
	var target = evt.target || evt.srcElement
	clone(target)
}
</script>
</head>
<body>
<div id="clone"></div>
<hr>
<div class="group">
	<div id="test1">static padding:1em border:3px groove</div>
	<div id="test2">static margin-right:50%</div>
	<div id="test3">relative</div> 
	<div id="test4">absolute haslayout</div>
	<div id="test5">border 0.5em width:50% haslayout</div> 
	<div id="test6">width:50% margin:auto haslayout</div> 
</div>

<table id="test10">
	<tr>
		<td> cell 1 </td>
		<td> cell 2</td>
		<td colspan="2"> cell 3 4 </td>
		<td></td>
		<td> cell 6 </td>
	</tr>
</table>

<table id="test11" border="1" width="500">
	<tr>
		<td> cell 1 </td>
		<td> cell 2</td>
		<td colspan="2"> cell 3 4 </td>
		<td></td>
		<td> cell 6 </td>
	</tr>
</table>

<table id="test12" border="5" cellspacing="5">
	<tr>
		<td> cell 1 </td>
		<td> cell 2</td>
		<td colspan="2"> cell 3 4 </td>
		<td></td>
		<td> cell 6 </td>
	</tr>
</table>

<table id="test13" border="16" cellspacing="5" width="500">
	<caption>border-collapse:collapse</caption>
	<tr>
		<td> cell 1 </td>
		<td> cell 2</td>
		<td colspan="2"> cell 3 4 </td>
		<td></td>
		<td> cell 6 </td>
	</tr>
	<tr>
		<td> cell 1 </td>
		<td> cell 2</td>
		<td colspan="2"> cell 3 4 </td>
		<td></td>
		<td> cell 6 </td>
	</tr>
</table>

<script src="../getUsedValue.js"></script>
<script> 
//alert([div.runtimeStyle.width, div.currentStyle.width, div.offsetWidth, div.clientWidth, div.style.pixelWidth])
//alert(document.body.clientWidth)
</script> 
</body>
</html>